@import url(./manrope.css);

html,
body,
#root {
  height: 100%;
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  font-size: 16px;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: Manrope -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {

  font-family: Manrope, source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.pointer {
  cursor: pointer;
}



:root {
  /*背景颜色*/
  --primary-bg-color: #f5f7f9;
  /*副背景颜色*/
  --sencond-bg-color: #fff;
  /*主文字颜色*/
  --primary-text-color: #515a6e; 
  /*文字加粗色*/
  --primary-block-color: #17233d;

  /* menu 主背景颜色 */
  --menu-primary-bg-color: #191a23;
  /* menu 副背景颜色 */
  --menu-second-bg-color: #101117;
  /* menu 主文字颜色 */
  --menu-primary-text-color: rgba(255, 255, 255, .7);
  /* menu 副文字颜色 */
  --menu-active-text-color: #fff;

  /*menu svg-color*/
  --menu-svg-color: #f5f5f5;

  /*tab 文字颜色*/
  --tabs-text-color: #808695;
  /*面包屑文字颜色*/
  --breadcrumb-text-color: #999;

  /*提示颜色*/
  --primary-color: #357DFF;
  --success-color: #22C55E;
  --warning-color: #FACC15;
  --error-color: #E82C81;

  /*灰度*/
  --gary-50-color: #F8F9FD;
  --gary-100-color: #F1F5F9;
  --gary-200-color: #E2E8F0;
  --gary-300-color: #CBD5E1;
  --gary-400-color: #94A3B8;
  --gary-500-color: #64748B;
  --gary-600-color: #475569;
  --gary-700-color: #334155;
  --gary-800-color: #1E293B;
  --gary-900-color: #0F172A;

  /*固定色*/
  --white-color: #fff;

  /*topbar 阴影*/
  --top-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  /*文字阴影*/
  --text-box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}




/* 全局css */

label {
  color: var(--gary-50-color) !important;
}

.ant-menu {
  background-color: var(--menu-primary-bg-color);
  color: var(--menu-primary-text-color);
}

#root .ant-menu {
  border: none;
}
#root .ant-menu-item {
  color: var(--menu-primary-text-color)
}
#root .ant-menu-item:hover {
  color: var(--menu-active-text-color)
}
#root .ant-menu-submenu-title {
  color: var(--menu-primary-text-color)
}
#root .ant-menu-submenu:hover .ant-menu-submenu-title {
  color: var(--menu-active-text-color)
}


#root .ant-menu-item-active:active {
  background-color: var(--menu-second-bg-color);
  color: var(--menu-active-text-color);
}

#root .ant-menu-item-selected {
  background-color: var(--primary-color);
  color: var(--menu-active-text-color);
}

#root .ant-menu-submenu-title:active {
  background-color: var(--menu-second-bg-color);
}

#root .ant-menu-submenu-selected>.ant-menu-submenu-title, .ant-menu-submenu-selected>.menu-svg {
  color: var(--menu-active-text-color);

}

#root .ant-menu-item, #root .ant-menu-submenu-title {
  height: 3.25rem;
}

#root .ant-menu-submenu-open {
  .ant-menu-sub {
    background-color: var(--menu-second-bg-color);
  }
}

.ant-menu .ant-menu-item, .ant-menu .ant-menu-submenu, .ant-menu .ant-menu-submenu-title {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

#root .ant-menu-submenu-title, #root .ant-menu-item {
  margin: 0;
  width: 100%;
}

/* CSS样式 */
.rotate .menu-svg {
  animation-name: rotate;
  /* 指定要应用的动画名称为 "rotate" */
  animation-duration: 2s;
  /* 设置动画持续时间为2秒 */
}

/* @keyframes规则 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  /* 初始状态，元素不旋转 */
  100% {
    transform: rotate(360deg);
  }

  /* 结束状态，元素完全旋转一周（360度）*/
}


/* 定义抖动动画 */
@keyframes shake {
  0% {
    transform: rotate(-15deg);
  }

  2% {
    transform: rotate(15deg);
  }

  4% {
    transform: rotate(-18deg);
  }

  6% {
    transform: rotate(18deg);
  }

  8% {
    transform: rotate(-22deg);
  }

  10% {
    transform: rotate(22deg);
  }

  12% {
    transform: rotate(-18deg);
  }

  14% {
    transform: rotate(18deg);
  }

  16% {
    transform: rotate(-12deg);
  }

  18% {
    transform: rotate(12deg);
  }

  20% {
    transform: rotate(0deg);
  }

  /* 结束时返回原始位置 */
}

/* 应用抖动动画到元素上 */
.shake .menu-svg {
  animation: shake 2s infinite;
  /*无限次重复播放动画，持续时间为1秒*/-webkit-animation: shake 1s infinite;
  -webkit-animation: shake 2s infinite;
}


.ant-form label {
  color: var(--tabs-text-color) !important; 
}

